<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/api.css">
		<style>
			.flex-con {
				overflow: hidden;
			}
			.input {
				margin-top: 30px;
				padding: 0 15px;
				background-color: white;
				border: 1px solid #ddd;
				border-width: 1px 0;
			}
			.input .flex-wrap {
				background-position: left center;
				background-size: 18px auto;
				position: relative;
				padding: 17px 10px 12px 33px;
				font-size: 13px;
			}
			.input .flex-wrap+ .flex-wrap {
				border-top: 1px solid #ddd;
			}
			.input .flex-wrap input {
			}
			.input .flex-wrap .ic-eye {
				width: 45px;
				height: 45px;
				background-position: center 18px;
				position: absolute;
				right: 0;
				top: 0;
				background-size: 18px auto;
			}
			.input .flex-wrap .ic-eye.active {
				background-position: center -15px;
			}
			.input .flex-wrap .get-code {
				color: #333333;
				background-color: #f3d41d;
				border-radius: 6px;
				line-height: 25px;
				height: 25px;
				padding: 0 15px;
				position: absolute;
				right: 0;
				top: 10px;
			}
			.input .flex-wrap .get-code.disable {
				background-color: #ededed;
				color: #999;
			}
			.btns {
				padding: 50px 22px;
			}
			.btns .submit {
				background-color: #f3d41d;
				color: #333333;
				line-height: 35px;
				border-radius: 35px;
				text-align: center;
				font-size: 15px;
			}
		</style>
	</head>
	<body class="flex-wrap flex-vertical">
		<div class="flex-con">
			<div class="input">
				<div class="flex-wrap ic-phone" >
					<input oninput="fnVerifyInput({ type: 'number', el: this});" class="flex-con phone" placeholder="请输入手机号" />
					<div tapmode="opacity" onclick="fnRequestSendVerifyCode( this )" class="get-code">
						获取验证码
					</div>
				</div>
				<div class="flex-wrap ic-msg" >
					<input oninput="fnVerifyInput({ type: 'number', el: this});" class="flex-con verify_code" placeholder="请输入验证码" />
				</div>
				<div class="flex-wrap  ic-lock" >
					<input class="flex-con password" type="password" placeholder="请输入密码" />
					<div tapmode="opacity" onclick="fnEye(this)" class="ic-eye"></div>
				</div>
				<!--<div class="flex-wrap  ic-lock" >
					<input class="flex-con confirmPassword" type="password" placeholder="再次输入密码" />
					<div tapmode="opacity" onclick="fnEye(this)" class="ic-eye"></div>
				</div>-->
			</div>
			<div class="btns">
				<div tapmode="opacity" onclick="fnRegisterUser()" class="submit">
					立即注册
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<script type="text/javascript">
		var phone, verify_code, password, confirmPassword, startTs;
		apiready = function() {
			//		alert( JSON.stringify( api.pageParam ) )
		}
		function fnRegisterUser() {
			phone = $api.dom('.phone'), verify_code = $api.dom('.verify_code'), password = $api.dom('.password'), confirmPassword = $api.dom('.confirmPassword');
			if (! phone.value.trim()) {
				fnPopup({
					msg : '请输入手机号码'
				})
			} else if (! verify_code.value.trim()) {
				fnPopup({
					msg : '请输入验证码'
				})
			} else if (! password.value.trim()) {
				fnPopup({
					msg : '请输入密码'
				})
			} else if (password.value.length <= 0) {
				fnPopup({
					msg : '密码不能为空'
				})
			}
//			 else if (! confirmPassword.value.trim()) {
//				fnPopup({
//					msg : '请确认密码'
//				})
//			} else if (confirmPassword.value !== password.value) {
//				fnPopup({
//					msg : '确认密码有误！'
//				})
//			}
			 else {
				api.showProgress({
					animationType : 'zoom',
					title : '正在注册...'
				});
				api.execScript({
					name : 'root',
					script : 'fnRegisterUser(' + JSON.stringify({
						winName : api.winName,
						frameName : api.frameName,
						phone : phone.value,
						password : password.value,
						verify_code : verify_code.value,
					}) + ')'
				});
			}
		}

		function fnEye(el) {
			if ($api.hasCls(el, 'active')) {
				$api.removeCls(el, 'active');
				$api.closest(el, '.ic-lock').querySelector('input').setAttribute('type', 'password');
			} else {
				$api.addCls(el, 'active');
				$api.closest(el, '.ic-lock').querySelector('input').setAttribute('type', 'text');
			}
		}

		function receive_fnRegisterUser(ret, err) {
			if (ret) {
				api.execScript({
					name : 'win_login',
					frameName : 'frm_login',
					script : 'fnEmpty({userName: "' + phone.value + '"})'
				});
				fnPopup({
					msg : '注册成功'
				}, function() {
					api.execScript({
						name : 'win_login',
						frameName : 'frm_login',
						script : 'fnUserLogin(' + JSON.stringify({
							winName : api.winName,
							frameName : api.frameName,
							userName : phone.value,
							password : password.value
						}) + ')'
					});
					api.closeWin();
				})
			} else {
				fnNotes(err);
			}
			api.hideProgress();
		}

		function fnRequestSendVerifyCode(el) {
			if (! $api.hasCls(el, 'disable')) {
				var phone = $api.dom('.phone');
				if (! phone.value.trim()) {
					fnPopup({
						msg : '请输入手机号码'
					})
				} else {
					api.showProgress({
						animationType : 'zoom',
						title : '正在发送'
					});
					api.execScript({
						name : 'root',
						name : 'root',
						script : 'fnRequestSendVerifyCode(' + JSON.stringify({
							winName : api.winName,
							frameName : api.frameName,
							phone : phone.value
						}) + ')'
					});
				}
			}
		}

		function receive_fnRequestSendVerifyCode(ret, err) {
			if (ret) {
				startTs = Math.floor(Date.now() / 1000);
				fnCountDown(startTs + 60);
				fnPopup({
					msg : '发送成功'
				}, function() {
				});
			} else {
				fnPopup({
					msg : '短信发送失败'
				}, function() {
				});
			}
			api.hideProgress();
		}

		function fnCountDown(num) {
			var el = $api.dom('.get-code');
			setTimeout(function() {
				var currentTs = Math.floor(Date.now() / 1000);
				var timeout = num - currentTs;
				if (timeout <= 0) {
					$api.removeCls(el, 'disable');
					el.innerHTML = '获取验证码';
				} else {
					if (!$api.hasCls(el, 'disable'))
						$api.addCls(el, 'disable');
					el.innerHTML = timeout + 's 后重试';
					fnCountDown(num)
				}
			}, 250);
		}
	</script>
</html>